Remix Icon - 免費開源圖標庫，多達 2 千以上的線性圖標免版權可商用下載

Facebook Line Messenger Telegram

Remix Icon 是一套免費開源的圖標庫，收錄超過 2,800 個中性風格圖標，採用 Apache License 2.0 授權，個人與商業專案都能直接使用，不需署名也不需付費。如果你在找一套「數量夠多、風格統一、授權無虞」的圖標素材，Remix Icon 目前在同類開源方案中是數一數二的選擇。

這套圖標庫由設計師 Jimmy Cheung 與 Wendy Gao 共同打造，GitHub 上累積超過 8,100 顆星星。截至 2026 年 5 月，最新版本為 v4.9.1（2026 年 1 月發布），收錄的圖標數量仍在持續增加。跟 Icons8 或 Iconshock 這類以商業模式營運的圖標平台不同，Remix Icon 是純粹的開源社群專案，所有圖標完全免費，沒有付費解鎖更多圖標的機制。如果你平常就會用到各類免費圖庫與設計素材，Remix Icon 值得加入你的工具清單。

Remix Icon 是什麼？定義與核心特色

Remix Icon 是一組以 24px 網格系統為基礎設計的線性圖標集，每個圖標同時提供線條（line）和實心（fill）兩種版本。所有圖標保持一致的視覺比例與線條粗細，這點對大量使用圖標的介面設計來說非常關鍵：當你在同一個頁面混搭不同圖標時，統一的設計語言讓整體視覺更協調，不會出現某個圖標特別突兀的狀況。

跟 Feather Icons 的極簡風格比起來，Remix Icon 的圖標細節更豐富，辨識度也更高。和 Heroicons 相比，Remix Icon 在數量上佔了壓倒性優勢，涵蓋的使用場景也更廣泛。每個圖標都提供 SVG 原始碼、PNG 下載、CSS Class 引用以及 DataURL 格式，你可以根據專案需求選擇最適合的用法。

在 Remix Icon 官網點擊任何一個圖標後，你可以直接在網頁上調整顏色和尺寸，調整好之後再複製 SVG 原始碼或下載 PNG 檔案。另一個實用的功能是「收藏打包」：瀏覽圖標時把需要的加入收藏清單，最後一次打包下載。如果你對 CSS.GG 這類純 CSS 圖標方案也有興趣，Remix Icon 同樣支援 CSS Class 的引用方式，兩者可以根據專案特性來選擇。

Remix Icon 與其他免費圖標庫比較

市面上免費圖標庫很多，每一套的定位和適用場景都不同。以下把 Remix Icon 和幾套主流方案做個對照：

圖標庫	圖標數量	授權	風格	適合場景
Remix Icon	2,800+	Apache 2.0	中性線性	網站、APP、管理後台
Feather Icons	280+	MIT	極簡線性	輕量級介面
Heroicons	300+	MIT	圓潤線性	Tailwind 專案
Flaticon	數百萬+	免費需署名	多種風格	簡報、社群圖片
Tabler Icons	5,000+	MIT	線性	開源管理後台

Remix Icon 在「數量」和「授權自由度」之間取得了不錯的平衡。Feather Icons 授權寬鬆（MIT），但圖標數量只有 280 個左右，遇到稍微特殊一點的需求就不夠用。Flaticon 的圖標數量龐大，但免費方案需要署名，商業使用上會多一層顧慮。跟 IconPark（字節跳動出品）相比，Remix Icon 的分類方式更直覺，搜尋體驗也更流暢。LineIcons 雖然同為線性風格，但在數量上 Remix Icon 更佔優勢。如果你需要的是高品質且分類清楚的圖標集，Tabler Icons 和 Remix Icon 都是不錯的選擇，兩者都以開源方式釋出。

Remix Icon 的圖標風格偏向中性實用，不會太花俏也不會太單調，能輕鬆融入各種設計語言。如果你正在做管理後台或工具型應用的介面，Remix Icon 幾乎是首選等級的方案。但如果你需要更有個性的圖標，可以搭配 FindIcons 這類圖標搜尋引擎來尋找更合適的素材。

如何從官網下載 Remix Icon

從官網取得 Remix Icon 的步驟很簡單：

步驟一：搜尋或瀏覽圖標
打開官網後，頂部有一個搜尋框，直接輸入英文關鍵字（例如 “home”、”user”、”settings”）來找圖標。如果不確定關鍵字，可以透過左側的分類選單瀏覽。

步驟二：調整樣式
點擊任何一個圖標後，畫面下方會彈出工具面板，可以調整顏色（支援任何色碼）、像素大小（16px 到 512px），也可以選擇線條或實心樣式。即時預覽功能讓你直接看到調整後的效果。

步驟三：下載或複製
調整完畢後，你可以直接下載 SVG 檔案、下載 PNG 檔案、複製 SVG 原始碼、複製 DataURL，或是把圖標加入收藏清單。如果需要批量取得，建議使用收藏功能，先把所有需要的圖標加到清單裡，再一次打包下載。

官網右上方的「Download All」按鈕可以下載完整的圖標包，包含所有 SVG 檔案、Icon Font 字型檔和使用說明。拿到 SVG 檔案後如果覺得體積太大，可以用 SVG Repo 找到更多相似的 SVG 圖標資源，或透過 IcoMoon App 更細緻地管理自訂圖標字型。

透過 npm 安裝 Remix Icon（前端開發者教學）

前端專案最方便的取得方式是透過 npm 安裝，套件名稱為 remixicon：

npm install remixicon

安裝完成後，在專案主要 CSS 或 JS 入口檔案引入：

import 'remixicon/fonts/remixicon.css'

引入 CSS 之後，在 HTML 中使用  標籤搭配 Class 名稱來顯示圖標。每個圖標的 Class 名稱格式是 ri-圖標名稱-line（線條版本）或 ri-圖標名稱-fill（實心版本）：

 顯示線條風格的首頁圖標
 顯示實心風格的首頁圖標

不管你用的是 Webpack 還是 Vite，只要確認 CSS loader 有正確設定就可以。如果專案有做 Tree-shaking，可以改從 node_modules/remixicon/svg/ 目錄直接 import 單獨的 SVG 檔案，打包出來的體積會更精簡。在開發過程中，Ray.so 是把程式碼片段轉成圖片分享的好工具，LOADING.IO 則提供大量前端載入動畫素材，可以跟 Remix Icon 的圖標搭配使用。對於想要自訂按鈕樣式的開發者，Neumorphism CSS Generator 也能幫上不少忙。

使用 CDN 快速引入 Remix Icon

如果你只是想做個簡單的靜態頁面、快速原型驗證，或者不想增加 node_modules 的體積，用 CDN 引入是最省事的做法。在 HTML 的 <head> 區段加一行：

<link href="https://cdn.jsdelivr.net/npm/remixicon@latest/fonts/remixicon.css" rel="stylesheet">

加上這行之後，就能在整個頁面中使用 ri-* 開頭的 Class 名稱來顯示圖標。使用方式跟 npm 安裝一模一樣，差別只在於 CSS 檔案從 CDN 載入。

CDN 引入的好處是設定簡單，不需要任何建置工具。缺點是依賴第三方伺服器的可用性，如果 CDN 服務暫時掛掉，圖標就無法顯示。建議指定固定版本號（例如 [email protected]）而非使用 @latest，避免版本更新帶來的非預期變動。如果你的網站已經使用 Cloudflare CDN 來加速，搭配 CDN 引入 Remix Icon 在快取命中率上會表現得更好。追求極致載入速度的網站可以搭配 instant.page 這類預先載入工具，讓圖標的顯示更加即時。WordPress 使用者也歡迎參考我們的 WordPress 速度優化技巧，裡面有更多提升網站載入效能的實用方法。

在 WordPress 網站中整合 Remix Icon

想在 WordPress 網站中使用 Remix Icon，有三種做法可以選擇：

方法一：透過佈景主題的 functions.php 引入

這是最常見也比較乾淨的做法。在子佈景主題的 functions.php 檔案中加入：

function enqueue_remixicon() { wp_enqueue_style('remixicon', 'https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css'); } add_action('wp_enqueue_scripts', 'enqueue_remixicon');

這樣 WordPress 就會在每個頁面自動載入 Remix Icon 的 CSS。之後只要在文章或頁面的「自訂 HTML」區塊中使用對應的 Class 名稱，就能顯示圖標。

方法二：使用外掛加入 CSS

如果你不想修改佈景主題的檔案，可以安裝 WPCode 這類「插入程式碼」的外掛，把 CDN 連結加到網站的 <head> 區段中。效果跟修改 functions.php 一樣，但設定介面更友善。

方法三：在區塊編輯器中直接使用

不管你用哪一種引入方式，最終在 WordPress 佈景主題的 Gutenberg 區塊編輯器中，都可以透過「自訂 HTML」區塊來插入圖標。例如新增一個自訂 HTML 區塊，貼上 ，就能直接在文章裡顯示一顆金色的星星圖標。

在效能方面，如果你用的是 Bluehost 或 Kinsta 這類品質穩定的 WordPress 主機，CDN 引入方式的載入速度通常不成問題。但如果主機回應速度偏慢，可以考慮把 CSS 檔案下載到本地伺服器，配合 WordPress 快取外掛一起使用，確保圖標載入不會拖慢整個頁面。如果你正在尋找適合的主機方案，我們的 WordPress 主機推薦懶人包裡面有完整的評比和建議。

Remix Icon 在前端框架中的實際應用

在 React 專案中使用

React 專案中可以使用 remixicon 這個 npm 套件，引入 CSS 後就能直接在 JSX 中使用  這種寫法。如果你更偏好 Component 的方式，也有第三方封裝的 React 版本，把每個圖標包裝成獨立的 Component，用起來更符合 React 的寫作習慣。

在 Vue 專案中使用

Vue 的使用方式跟 React 類似，安裝 npm 套件後在 main.js 中引入 CSS，接著就能在 Vue Template 中直接用  來顯示圖標。不管是 Vue 2 還是 Vue 3，設定流程都差不多。

搭配 Figma 設計流程

Remix Icon 也有提供 Figma 社群檔案，設計師可以直接在 Figma 中搜尋並插入圖標，不需要手動下載 SVG 再匯入。這讓設計稿中使用的圖標能和開發端保持一致，大幅減少設計到開發之間的溝通成本。如果你的團隊有在使用 Dark Mode 深色主題，Remix Icon 的線條風格在深色背景下也有很好的辨識度。

搭配 Tailwind CSS

Remix Icon 的 CSS Class 可以直接跟 Tailwind CSS 或任何 CSS 框架搭配使用。你可以用 Tailwind 的 utility class 來控制圖標的大小、顏色和間距，例如 。如果你需要更多 CSS 背景樣式素材來搭配整體視覺設計，也可以參考我們之前介紹過的相關工具。

Remix Icon 適合誰？不適合誰？

適合使用的情境：

需要大量風格統一的圖標來搭建管理後台或工具型應用
前端專案需要透過 npm 或 CDN 引入圖標字型
設計師在 Figma 中需要一套完整的圖標集來保持設計一致性
個人或商業專案需要免費可商用的圖標，不想處理署名要求
WordPress 網站想要在文章或頁面中使用自訂圖標

可能不適合的情境：

你需要的是色彩豐富的插圖型圖標，而非中性線性圖標
專案只需要 5 到 10 個極簡圖標，Feather Icons 可能更精簡
你需要大量品牌 Logo 圖標，Remix Icon 的品牌類別數量有限
你的目標受眾是兒童或需要更活潑、具象化的圖示風格

限制與注意事項

Remix Icon 雖然是優質的開源圖標庫，但有幾個地方需要留意：

品牌圖標數量有限。Remix Icon 收錄了一些科技品牌與社群平台的標誌圖標，但數量遠不如專門的品牌圖標集。如果你需要大量品牌 Logo，可能要另外搭配其他資源。

圖標風格單一。Remix Icon 只有中性線性風格，如果你專案的設計語言需要填充、雙色、圓角或手繪等其他風格，這套圖標庫無法滿足。你需要混搭其他圖標庫，但這會犧牲視覺一致性。

Icon Font 的效能考量。透過 CSS Class 引入整個 Icon Font 時，瀏覽器會載入包含所有圖標的字型檔案。如果你的網站只用到 10 到 20 個圖標，載入整個字型檔案的體積（約 200KB）並不划算。這種情況下建議改用個別 SVG 引入的方式。

搜尋僅支援英文。官網的搜尋框只接受英文關鍵字，不支援中文搜尋。對於習慣用中文思考的台灣使用者來說，可能需要先想好對應的英文關鍵字。

下一步：三個立即可以執行的動作

1. 瀏覽官方圖標庫
前往 Remix Icon 官網搜尋你專案需要的圖標。判斷標準：如果大多數需要的圖標都找得到，而且風格跟你的專案搭配，就值得採用。預期結果：你會得到一組風格統一且授權明確的圖標清單。

2. 選擇適合的引入方式
根據你的專案類型選擇引入方式：前端專案用 npm 安裝，靜態頁面或原型用 CDN 引入，WordPress 網站透過 functions.php 引入。判斷標準：如果你的專案已經有建置工具，用 npm；如果沒有，用 CDN。預期結果：10 分鐘內就能在頁面中顯示第一個圖標。

3. 確認授權需求
Remix Icon 採用 Apache License 2.0 授權，商業使用完全沒有問題，不強制署名。如果你的團隊或法務需要確認授權細節，可以直接參考 GitHub 儲存庫中的授權檔案。預期結果：你可以安心在商業專案中使用，不需要額外的授權文件。

Remix Icon 常見問題 FAQ

Remix Icon 可以商用嗎？

可以。Remix Icon 採用 Apache License 2.0 授權條款，明確允許商業用途。你可以在任何商業產品中使用這些圖標，包含網站、APP、SaaS 服務等。不強制署名，但如果方便提及 Remix Icon，對專案的推廣有幫助。

Remix Icon 需要付費嗎？

完全不需要。Remix Icon 是一個純粹的開源專案，所有圖標完全免費提供。不像某些圖標庫有免費版和付費版的區別，Remix Icon 沒有這種商業模式。

如何在 WordPress 中安裝 Remix Icon？

最簡單的方式是透過佈景主題的 functions.php 引入 CDN CSS，或者使用 WPCode 等外掛把 CDN 連結加到網頁的 head 區段。詳細步驟可以參考上面「在 WordPress 網站中整合 Remix Icon」那段。如果你剛好在尋找穩定的 WordPress 虛擬主機，或考慮升級到高品質的 A2 Hosting 快速主機方案，好的主機環境能讓圖標資源的載入速度更有保障。

Remix Icon 和 Font Awesome 有什麼不同？

兩者最大的差異在於授權模式。Remix Icon 採用 Apache 2.0 授權，完全免費可商用。Font Awesome 雖然有免費版，但免費版圖標數量有限，更多圖標和進階功能需要付費訂閱。如果你不需要 Font Awesome 特有的品牌圖標，Remix Icon 在免費可用的範圍內提供了更多選擇。

Remix Icon 支援哪些檔案格式？

Remix Icon 支援 SVG 向量圖、PNG 點陣圖、Icon Font（CSS Class 引用）、DataURL（CSS 內嵌），以及 React Component 等多種格式。基本上你能想到的使用方式它都有支援。

如何貢獻圖標給 Remix Icon？

Remix Icon 的 GitHub 儲存庫是公開的，任何人都可以提交 Issue 或 Pull Request 來貢獻新的圖標設計。不過圖標需要遵循他們的設計規範（24px 網格、特定線條粗細），建議先閱讀 repo 中的貢獻指南再提交。

Remix Icon 目前有多少個圖標？

截至 2026 年 5 月，Remix Icon 已收錄超過 2,800 個圖標，涵蓋 30 多個分類。圖標數量仍在持續增加中，開發團隊會定期根據社群反饋新增圖標。你可以到 GitHub 儲存庫查看最新的更新紀錄。

使用 Remix Icon 需要標注來源嗎？

根據 Apache 2.0 授權條款，標注來源不是強制要求。但開發團隊在說明文件中提到，如果你方便的話，在作品中提及 Remix Icon 仍然是件好事，這能讓更多人認識這個專案。如果你的網站有使用到 Bluehost WordPress 安裝教學中介紹的最佳實務，也可以順便把 Remix Icon 的 CDN 引入加入你的標準設定流程中。想知道更多關於 WordPress 主題挑選和 WordPress SEO 外掛的資訊，我們也有完整的文章供你參考。

Remix Icon – 免費開源圖標庫，多達 2 千以上的線性圖標免版權可商用下載

Remix Icon 是什麼？定義與核心特色

Remix Icon 與其他免費圖標庫比較

如何從官網下載 Remix Icon

透過 npm 安裝 Remix Icon（前端開發者教學）

使用 CDN 快速引入 Remix Icon